<template>
    <div class="main">
        <el-header style="margin-top: 12px; min-width: 901px;">
            <span style=" margin-right: 15px;">编码:</span>
            <el-input style="width: 180px;" size="small" placeholder="请输入编码" v-model="queryInfo.code"></el-input>
            <span style="margin-left: 25px; margin-right: 15px;">名称:</span>
            <el-input style="width: 180px;height: 32px;" size="small" placeholder="请输入名称"
                v-model="queryInfo.name"></el-input>
            <el-button type="primary" size="small" style="margin-left: 15px;"
                @click="getassignmentList()">查询</el-button>
            <el-button size="small" @click="resetForm()">重置</el-button>
            <el-button type="text" icon="el-icon-arrow-down">展开</el-button>
        </el-header>
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24">
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;" @click="addList">新增</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;">导出</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;">导入</el-button>
                </el-col>
            </el-row>
            <!-- 数据渲染部分 -->
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
                ref="multipleTable">
                <!-- 添加全选和单选列 -->
                <el-table-column type="selection" width="55" />

                <!-- 自动生成序号 -->
                <el-table-column label="序号" type="index" :index="indexAdd" width="50" />
                <el-table-column label="编码" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="助记名" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.auxName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="分类" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.addressInvoice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="等级" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.customerLevel_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="纳税规模" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.taxScale_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属总公司" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.headquarters }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属地区" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.addressInvoice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务区域" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.addressInvoice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户地址" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户网站" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.website }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" width="180">
                    <template slot-scope="scope">
                        <span v-show="scope.row.isEnabled == '1'">是</span>
                        <span v-show="scope.row.isEnabled != '1'">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createBy_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改人" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createBy_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="DeleteTi(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加或者编辑募捐团队模态框 -->
            <el-drawer :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" class="demo-ruleForm"
                    size="small">
                    <el-form-item label="编码">
                        <el-input v-model="addassignment.code"></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="addassignment.name"></el-input>
                    </el-form-item>
                    <el-form-item label="助记名">
                        <el-input v-model="addassignment.auxName"></el-input>
                    </el-form-item>
                    <el-form-item label="客户分类">
                        <el-input v-model="addassignment.customerCategory"></el-input>
                    </el-form-item>
                    <el-form-item label="客户等级" style="display: block; margin-bottom: 15px;">
                        <el-select v-model="addassignment.customerLevel" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in optionsA" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="纳税规模">
                        <el-select v-model="addassignment.taxScale" placeholder="请选择" style="width: 100%;">
                            <el-option label="一般纳税规模" value="一般纳税规模">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="欠款额度">
                        <el-input v-model="addassignment.creditQuota"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-select v-model="addassignment.isEnabled" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="addassignment.remark"></el-input>
                    </el-form-item>

                    <el-collapse>
                        <el-collapse-item title="开票信息" name="1">
                            <el-form-item label="单位名称">
                                <el-input v-model="addassignment.invoiceCompany"></el-input>
                            </el-form-item>
                            <el-form-item label="税号">
                                <el-input v-model="addassignment.invoiceTaxCode"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行">
                                <el-input v-model="addassignment.invoiceBankName"></el-input>
                            </el-form-item>
                            <el-form-item label="行号">
                                <el-input v-model="addassignment.invoiceBankCode"></el-input>
                            </el-form-item>
                            <el-form-item label="账号">
                                <el-input v-model="addassignment.invoiceAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="addassignment.invoicePhone"></el-input>
                            </el-form-item>
                            <el-form-item label="开票地址">
                                <el-input v-model="addassignment.invoiceAddress"></el-input>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="办款资料" name="2">
                            <el-form-item label="单位名称">
                                <el-input v-model="addassignment.paymentCompany"></el-input>
                            </el-form-item>
                            <el-form-item label="税号">
                                <el-input v-model="addassignment.invoiceTaxCode"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行">
                                <el-input v-model="addassignment.paymentBankName"></el-input>
                            </el-form-item>
                            <el-form-item label="行号">
                                <el-input v-model="addassignment.paymentBankCode"></el-input>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="收件信息" name="3">
                            <el-form-item label="收件人">
                                <el-input v-model="addassignment.recvName"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="addassignment.recvPhone"></el-input>
                            </el-form-item>
                            <el-form-item label="传真">
                                <el-input v-model="addassignment.recvFax"></el-input>
                            </el-form-item>
                            <el-form-item label="Email">
                                <el-input v-model="addassignment.recvEmail"></el-input>
                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input v-model="addassignment.recvAddress"></el-input>
                            </el-form-item>
                            <el-form-item label="邮编">
                                <el-input v-model="addassignment.recvPostcode"></el-input>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="财务信息" name="4">
                            <el-form-item label="财务信息联系人">
                                <el-input v-model="addassignment.financialContacts"></el-input>
                            </el-form-item>
                            <el-form-item label="财务信息联系电话">
                                <el-input v-model="addassignment.financialPhone"></el-input>
                            </el-form-item>
                        </el-collapse-item>

                        <el-collapse-item title="其他信息" name="5">
                            <el-form-item label="简称">
                                <el-input v-model="addassignment.shortName"></el-input>
                            </el-form-item>
                            <el-form-item label="辅助名称">
                                <el-input v-model="addassignment.auxName"></el-input>
                            </el-form-item>
                            <el-form-item label="客户网站">
                                <el-input v-model="addassignment.website"></el-input>
                            </el-form-item>
                            <el-form-item label="法人代表">
                                <el-input v-model="addassignment.legalPerson"></el-input>
                            </el-form-item>
                            <el-form-item label="法人电话">
                                <el-input v-model="addassignment.legalPersonPhone"></el-input>
                            </el-form-item>
                            <el-form-item label="所属总公司">
                                <el-input v-model="addassignment.headquarters"></el-input>
                            </el-form-item>
                            <el-form-item label="所属地区">
                                <el-cascader v-model="addassignment.area" :options="regionOptions"
                                    :props="{ expandTrigger: 'click' }" @change="handleRegionChangeA"></el-cascader>
                            </el-form-item>
                            <el-form-item label="业务区域">
                                <el-cascader v-model="addassignment.bizArea" :options="regionOptions"
                                    :props="{ expandTrigger: 'click' }" @change="handleRegionChangeB"></el-cascader>
                            </el-form-item>
                            <el-form-item label="客户地址">
                                <el-input v-model="addassignment.address"></el-input>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse>

                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>


            <pagination :page="queryInfo.pageNo" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>
        </el-main>
    </div>
</template>

<script>
import Pagination from "../Pagination";
import guo from '../../assets/json/guo.json';
export default {
    data() {
        return {
            id: '',
            visible: true,//删除的弹框
            dialogFormVisible: false,
            total: 0,
            queryInfo: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            },

            //获取到的数据列表  
            tableData: [],
            addassignment: {
                "code": "编码",
                "name": "名称",
                "auxName": "编码 名称",
                "isEnabled": "1",
                "customerCategory": "",
                "customerLevel": "1",
                "taxScale": "1",
                "creditQuota": "999",
                "remark": "备注",
                "invoiceCompany": "单位名称",
                "invoiceTaxCode": "税号",
                "invoiceBankName": "开户行",
                "invoiceBankCode": "行号",
                "invoiceAccount": "账号",
                "invoicePhone": "联系电话",
                "invoiceAddress": "开票地址",
                "paymentCompany": "单位名称",
                "paymentBankName": "开户行",
                "paymentBankCode": "行号",
                "paymentAccount": "账号",
                "recvName": "收件人",
                "recvPhone": "联系电话",
                "recvFax": "传真",
                "recvEmail": "1231@qq.com",
                "recvAddress": "地址",
                "recvPostcode": "266000",
                "financialContacts": "财务信息联系人",
                "financialPhone": "财务信息联系电话",
                "shortName": "简称",
                "website": "客户网站",
                "legalPerson": "法人代表",
                "legalPersonPhone": "法人电话",
                "headquarters": "所属总公司",
                "area": "120102",
                "bizArea": "150523",
                "address": "客户地址"
            },
            options: [
                { value: '1', label: '是' },
                { value: '0', label: '否' }
            ],
            optionsA: [
                { value: '0', label: '一级' },
                { value: '1', label: '二级' }
            ],
            regionOptions: [],


            // AreamultipleSelection: [],//所属地区--三级联动
            // RecvmultipleSelection: [],//业务区域--三级联动
        }
    },
    methods: {
        handleRegionChangeA(value) {
            // console.log('Selected region:', value);
            const lastLevelValue = value[value.length - 1];
            // console.log('Last level value:', lastLevelValue);//获取最后一个值
            this.addassignment.area = lastLevelValue
        },
        handleRegionChangeB(value) {
            // console.log('Selected region:', value);
            const lastLevelValue = value[value.length - 1];
            // console.log('Last level value:', lastLevelValue);//获取最后一个值
            this.addassignment.recvPostcode = lastLevelValue
        },



        

        //查询数据渲染列表
        async getassignmentList() {
            const { data: res } = await this.axios.get("base/basCustomer/list", {
                params: this.queryInfo,
            });
            if (res.code != 200) return this.$message.error(res.message);
            this.tableData = res.result.records;
            this.total = res.result.total;
        },
        //初始化数据
        addList() {
            this.addassignment = {
                code: '',
                name: '',
                auxName: '',
                isEnabled: '1',
                "customerCategory": "",
                "customerLevel": "",
                "taxScale": "",
                "creditQuota": "",
                "remark": "",
                "invoiceCompany": "",
                "invoiceTaxCode": "",
                "invoiceBankName": "",
                "invoiceBankCode": "",
                "invoiceAccount": "",
                "invoicePhone": "",
                "invoiceAddress": "",
                "paymentCompany": "",
                "paymentBankName": "",
                "paymentBankCode": "",
                "paymentAccount": "",
                "recvName": "",
                "recvPhone": "",
                "recvFax": "",
                "recvEmail": "1231@qq.com",
                "recvAddress": "",
                "recvPostcode": "",
                "financialContacts": "",
                "financialPhone": "",
                "shortName": "",
                "website": "",
                "legalPerson": "",
                "legalPersonPhone": "",
                "headquarters": "",
                "area": "",
                "bizArea": "",
                "address": ""
            };
            this.dialogFormVisible = true;
        },
        //新增数据
        async addForm() {
            const { data: res } = await this.axios.post("base/basCustomer/add", this.addassignment);
            if (res.code != 200) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //编辑---【数据回显】
        handleEdit(row) {
            // console.log(index, row);
            this.id = row.id;
            this.addassignment = row;
            this.dialogFormVisible = true;
        },
        //编辑数据
        async editForm() {
            const { data: res } = await this.axios.put("base/basCustomer/edit", this.addassignment);
            if (res.code != 200) return this.$message.error("编辑失败");
            this.$message.success("编辑成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //删除提示操作
        DeleteTi(row) {
            this.$confirm(`此操作将永久删除该数据, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.handleDelete(row.id);
            });
        },
        //删除操作
        async handleDelete(id) {
            const { data: res } = await this.axios.delete(`base/basCustomer/delete`, {
                params: { id: id }
            });
            if (res.code != 200) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //全选单选
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log('选中的行:', val);
        },
        //重置数据
        resetForm() {
            this.queryInfo = {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            };
            this.getassignmentList()
        },
        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //自动增加序号
        indexAdd(index) {
            const page = this.queryInfo.pageNo // 当前页码
            const pagesize = this.queryInfo.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
        }
    },
    mounted() {
        this.getassignmentList();
        // let guoa = JSON.stringify(guo)
        this.regionOptions = guo;
    },
    components: {
        Pagination
    },
    watch: {
        'addassignment.name'() {
            if (this.addassignment.code) {
                this.addassignment.auxName = this.addassignment.code + ' ' + this.addassignment.name
            }
        }
    },

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    position: absolute;
    right: 0;
    height: 100%;
}

::v-deep .el-drawer.rtl {
    padding: 10px 20px;
    width: 50% !important;
}
</style>